<template>
  <div class="goodsListMore-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in orderState"
        :label="item"
        :name="item"
        :key="index"
      >
        <div class="topBar">
          <p style="width: 30%">商品</p>
          <p style="width: 20%">单价</p>
          <p style="width: 10%">数量</p>
          <p style="width: 10%">收货人</p>
          <p style="width: 10%">实付款</p>
          <p style="width: 10%">状态</p>
          <p style="width: 10%">操作</p>
        </div>

        <div
          class="table_container"
          v-for="(item, index1) in tableData.slice(
            (currentPage1 - 1) * pageSize,
            currentPage1 * pageSize
          )"
          :key="index1"
        >
          <div class="topInfo">
            <p>{{ Date.now() }}</p>
            <p>订单号:{{ item.udate }}</p>
          </div>
          <div class="goods_container">
            <div class="goods_frame">
              <img
                style="height: 60px; border: 1px solid #f8f8f8"
                :src="item.commodity.picture"
              />
              <div class="text">
                <p>{{ item.commodity.name.slice(0, 10) }}</p>
                <p style="color: gray">
                  {{ item.commcolor + "/" + item.commodguige }}
                </p>
              </div>
            </div>

            <div style="width: 20%">￥ {{ item.commodity.price }}</div>

            <div style="width: 10%">×{{ item.commoditysum }}</div>

            <div style="width: 10%">
              {{ user.ulname }}
            </div>

            <div class="shiFuKuan" style="width: 10%">
              <p>
                ￥{{
                  Math.floor(item.commoditysum * item.commodity.price * 100) /
                  100
                }}
              </p>
              <p>免邮费</p>
            </div>

            <div class="shiFuKuan" style="width: 10%">
              <p>待付款</p>
              <el-link type="info">订单详情</el-link>
            </div>

            <div class="shiFuKuan" style="width: 10%">
              <el-button
                size="mini"
                @click="opera(index, item)"
                v-if="index != 3 && index != 4"
                >{{
                  index == 0
                    ? "立刻支付"
                    : index == 1
                    ? "提醒发货"
                    : index == 2
                    ? "立刻收货"
                    : index == 3
                    ? ""
                    : index == 4
                    ? ""
                    : ""
                }}</el-button
              >
              <p
                @click="operaItem(index, item)"
                v-if="index != 1 && index != 2"
                style="text-decoration: underline; cursor: pointer; color: gray"
              >
                {{ index == 0 ? "取消订单" : index == 3 ? "评价" : "删除订单" }}
              </p>
            </div>
          </div>
        </div>

        <div class="pageMach">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[3, 5, 10]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//header
import TopHeader from "@/components/modules/header.vue";
//api
import { getSbysanduid } from "@/utils/api/api.js";
export default {
  components: {
    TopHeader,
  },
  data() {
    return {
      user: {},
      orderState: ["待支付", "待发货", "待收货", "待评价", "已完成"],
      activeName: "待支付",
      tableData: [],

      currentPage1: 1, //默认显示第一页
      total: null, //这是总是开始可以直接赋值为空都可以
      pageSize: 3, //每页显示多少条

      dialogVisible: false
    };
  },
  methods: {
    opera(index, data) {
      this.dialogVisible = true
      switch(index){
        case 0:
          break;
        case 1:
          break;
        case 2:
          break;
        case 3:
          break;
        case 4:
          break;
      }
      console.log(index + 1);
      console.log(data);
    },
    operaItem(index, item){
      console.log(index,item);
      switch(index){
        case 0:
          break;
        
        case 3:
          this.$router.push({
            path: "/comment",
            query: {
             goodsId: item.commodityid,
            },
          });
          break;
        default:
          break;
      }

    },
    handleClick(tab) {
      getSbysanduid(this.user.uid, Number(tab.index) + 1).then((resp) => {
        this.tableData = resp.msg;
        this.total = this.tableData.length;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
    },
  },
  created() {
    this.currentGoodsId = this.$route.query.goodsId;
    this.user = JSON.parse(localStorage.getItem("user"));
    getSbysanduid(this.user.uid, 1).then((resp) => {
      this.tableData = resp.msg;
      console.log(resp.msg);
    });
  },
};
</script>

<style lang="scss" scoped>
* {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.topBar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: rgb(231, 231, 231);
  p {
    align-items: center;
    text-align: center;
    padding: 10px 0;
  }
}
.table_container {
  margin: 10px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px dashed rgb(187, 187, 187);
  box-sizing: border-box;
  .topInfo {
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: rgb(246, 246, 246);
    p {
      padding: 10px 20px;
    }
  }
  .goods_container {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 10px;
    align-items: center;
    text-align: center;
    justify-content: left;

    .goods_frame {
      width: 30%;
      display: flex;
      justify-content: left;
      .text {
        display: flex;
        flex-direction: column;
      }
    }
    .shiFuKuan {
      display: flex;
      flex-direction: column;
    }
  }
}
.pageMach {
  width: 100%;
  display: flex;
  justify-content: right;
}
:deep(.el-tabs__content) {
  height: 100vh;
}
:deep(.el-tabs__item.is-active) {
  color: orange;
}
:deep(.el-tabs__active-bar) {
  background-color: orange;
}
:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: orange;
}
</style>